import React from 'react';
import { MagnifyingGlassIcon } from '@heroicons/react/24/outline';

interface ContactsSearchProps {
  value: string;
  onChange: (value: string) => void;
}

const ContactsSearch: React.FC<ContactsSearchProps> = ({ value, onChange }) => {
  return (
    <div className="px-4 py-2 bg-white border-b border-gray-100">
      <div className="relative">
        <MagnifyingGlassIcon className="w-5 h-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
          placeholder="搜索联系人"
          className="w-full pl-10 pr-4 py-2.5 bg-gray-50 rounded-lg text-gray-800 placeholder-gray-500 
                   border border-gray-200 focus:border-blue-500 focus:ring-1 focus:ring-blue-500 
                   focus:outline-none transition-colors"
        />
      </div>
    </div>
  );
};

export default ContactsSearch;